<template>
    <div class="login">
      <div class="login-index">
        <div class="login-box">
          <Row>
            <Col span="24">
              <p class="title">申泓自动化办公平台</p>
              <p class="title-sub">一套专注于便捷办公的系统</p>
              <div class="input-box">
                <Button type="primary" size="large" shape="circle" style="margin-right:3rem;width:31.5%;" @click="loginForm = true">开始探索</Button>
                <Button size="large" shape="circle" style="margin-right:.2rem;width:25%;color:#2d8cf0;border-color: #2d8cf0;">关于平台</Button>
                <Button size="large" shape="circle" style="width:25%;color:#2d8cf0;border-color: #2d8cf0;">支撑社区</Button>
                <Drawer
                  title="登录平台"
                  v-model="loginForm"
                  width="360"
                  :mask-closable="false"
                  :styles="formStyle">
                  <div class="form-title" align="center" style="font-size: 18px;height: 10%">
                    <span>欢迎使用SHOA</span>
                  </div>
                  <Form :model="formData" ref="loginForm" :rules="rules" >
                    <FormItem prop="account" label="登录账号">
                      <Input v-model="formData.account" prefix="md-contact"/>
                    </FormItem>
                    <FormItem prop="password" label="密码">
                      <Input type="password" v-model="formData.password" @keyup.enter.native="handleSubmit('loginForm')" prefix="md-key"/>
                    </FormItem>
                    <FormItem>
                      <Checkbox v-model="autoLogin">一周内记住我？</Checkbox>
                    </FormItem>
                    <FormItem>
                      <Button @click="handleSubmit('loginForm')" style="background-color: #19be6b;border-color: #FFFFFF;" type="primary" long>登录</Button>
                    </FormItem>
                  </Form>
                </Drawer>
              </div>
            </Col>
          </Row>
        </div>
      </div>
      <div class="footer">
        <span>Copyright © 成都申泓供水设备有限公司 2019</span>
      </div>
    </div>
</template>

<script>
  import md5 from 'js-md5';
  import {Message} from 'iview';
    export default {
        name: "login",
      data () {
        return {
          autoLogin:true,
          formData:{
            account: '',
            password: '',
          },
          rules:{
            account: [
            { required: true, message: '账号不能为空', trigger: 'blur' }
            ],
            password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
            ]
          },
          loginForm: false,
          formStyle:{
            display: 'block',
            height: 'calc(100% - 55px)',
            overflow: 'auto',
            paddingBottom: '53px',
            position: 'static'
          }
        };
      },
      methods: {
        //提交表单
        handleSubmit(name){
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.$post("/authentication/login",{"username":this.formData.account,"password":md5(this.formData.password)})
                .then(res=>{
                  if(res.resultCode===0){
                    //是否记住密码
                    if(this.autoLogin){
                      localStorage.setItem('nickname',res.data.nickname);
                      localStorage.setItem('userId',res.data.userId);
                      localStorage.setItem('username',this.formData.account);
                      localStorage.setItem('password',md5(this.formData.password));
                      localStorage.setItem('loginTime',new Date().getTime()+'');
                    }else{
                      localStorage.removeItem("nickname");
                      localStorage.removeItem("username");
                      localStorage.removeItem("password");
                      localStorage.removeItem("loginTime");
                    }
                    this.$router.push({ path: 'index'});
                  }else{
                    Message.error({
                      content: '登录失败，请检查用户名或密码！',
                      duration: 3
                    });
                  }
                });

            }
          })
        }
      }
    }
</script>

<style lang="css" scoped>

</style>
